<template>
  <div v-if="isOpen" :class="['status', statusData.cl]" style="cursor: pointer" @click="onOpen">
    {{ statusData.text }}
  </div>
  <div v-else :class="['status', statusData.cl]">
    {{ statusData.text }}
  </div>
</template>

<script setup>
  /**
   * @property {String} from  使用页面 index | detail
   * @property {Object} order 订单详情
   * @property {String} type  状态类型(status_code在订单上,其余在item上)
   * @property {Object} item  商品详情
   */
  import { computed } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import OrderDispatch from '../dispatch.vue';
  import AftersaleDetail from '../../aftersale/detail.vue';
  import OrderRefund from '../refund.vue';
  import CommentIndex from '@/app/shop/admin/goods/comment/index.vue';
  import { checkAuth } from '@/sheep/directives/auth';

  const emit = defineEmits(['updateList']);
  const props = defineProps({
    from: {
      type: String,
      default: 'index',
    },
    order: {
      type: Object,
    },
    type: {
      type: String,
    },
    item: {
      type: Object,
    },
  });

  const statusData = computed(() => {
    let data = {
      cl: '',
      text: '',
    };
    switch (props.type) {
      case 'status_code':
        switch (props.order.status_code) {
          case 'cancel': // 已取消
            data.cl = 'status-danger';
            break;
          case 'closed': // 交易关闭
            data.cl = 'status-danger';
            break;
          case 'unpaid': // 待付款
            data.cl = 'status-info';
            break;
          case 'nosend': // 待发货
            data.cl = 'status-warning';
            break;
          case 'noget': // 待收货
            data.cl = 'status-warning';
            break;
          case 'nocomment': // 待评价
            data.cl = 'status-warning';
            break;
          case 'commented': // 已评价
            data.cl = 'status-success';
            break;
          case 'apply_refund': //申请退款中
            data.cl = 'status-danger';
            break;
          case 'refund_completed': // 退款完成
            data.cl = 'status-success';
            break;
          case 'refund_agree': // 退款已同意
            data.cl = 'status-success';
            break;
          case 'groupon_ing': // 等待成团
            data.cl = 'status-warning';
            break;
          case 'groupon_invalid': // 拼团失败
            data.cl = 'status-danger';
            break;
          case 'completed': // 交易完成
            data.cl = 'status-success';
            break;
        }
        data.text = props.order.status_text;
        break;
      // 发货
      case 'dispatch':
        switch (props.item.dispatch_status) {
          case 0: // 未发货
            data.cl = isOpen.value ? 'status-primary' : 'status-info';
            data.text = isOpen.value ? '去发货' : '未发货';
            break;
          case 1: // 已发货
            data.cl = 'status-warning';
            data.text = props.item.dispatch_status_text;
            break;
          case 2: // 已收货
            data.cl = 'status-success';
            data.text = props.item.dispatch_status_text;
            break;
        }
        data.cl += isOpen.value ? ' cursor-pointer' : '';
        break;
      // 售后
      case 'aftersale':
        switch (props.item.aftersale_status) {
          case -1: // 拒绝
            data.cl = 'status-danger';
            break;
          case 0: // 未申请
            data.cl = 'status-info';
            break;
          case 1: // 申请售后
            data.cl = 'status-warning';
            break;
          case 2: // 售后完成
            data.cl = 'status-success';
            break;
        }
        data.cl += isOpen.value ? ' cursor-pointer' : '';
        data.text = props.item.aftersale_status_text;
        break;
      // 退款
      case 'refund':
        switch (props.item.refund_status) {
          case 0: // 主动退款
            data.cl = 'status-primary';
            break;
          case 1: // 同意退款
            data.cl = 'status-success';
            break;
          case 2: // 退款完成
            data.cl = 'status-success';
            break;
        }
        data.cl += isOpen.value ? ' cursor-pointer' : '';
        data.text = isOpen.value ? '主动退款' : props.item.refund_status_text;
        break;
      // 评价 TODO: 是否需要 btns 控制
      case 'comment':
        switch (props.item.comment_status) {
          case 0: // 待评价
            data.cl = 'status-warning';
            data.text = props.item.comment_status_text;
            break;
          case 1: // 已评价
            data.cl = 'status-success';
            data.text = '查看评价';
            break;
        }
        break;
    }
    return data;
  });

  // 是否可以open详情 btns控制
  const isOpen = computed(() => {
    // 订单上的 按钮
    // 1、refund:全额退款 detail
    // 2、send:发货 detail
    // 3、groupon：拼团详情 index

    // 订单 item 上的按钮
    // 1、refund 主动退款 detail
    // 2、send 发货 index
    // 3、send_cancel取消发货（暂时不用）
    // 4、comment_view：查看评价，订单详情 item 上 detail
    // 5、aftersale_info售后详情 index detail

    switch (props.type) {
      case 'dispatch': // 订单列表可进行发货事件
        return (
          props.from == 'index' &&
          props.item.btns.includes('send') &&
          checkAuth('shop.admin.order.order.dispatch')
        );
        break;
      case 'aftersale': // 订单列表可进行售后事件/订单详情可进行查看售后详情事件
        return (
          ((props.from == 'index' && props.item.btns.includes('aftersale_info')) ||
            (props.from == 'detail' && props.item.aftersale_status == 2)) &&
          checkAuth('shop.admin.order.aftersale.edit')
        );
        break;
      case 'refund': // 订单详情 refund_status == 0 可进行退款事件
        return (
          props.from == 'detail' &&
          props.item.btns.includes('refund') &&
          checkAuth('shop.admin.order.order.refund')
        );
        break;
      case 'comment': // 订单详情 comment_status == 1 可查看评价
        return props.item.comment_status == 1 && checkAuth('shop.admin.goods.comment');
        break;
    }
  });

  function onOpen() {
    if (props.type == 'dispatch') {
      onOpenDispatch();
    } else if (props.type == 'aftersale') {
      onOpenAftersale();
    } else if (props.type == 'refund') {
      onOpenRefund();
    } else if (props.type == 'comment') {
      onOpenComment();
    }
  }

  function onOpenDispatch() {
    useModal(
      OrderDispatch,
      {
        title: '订单发货',
        data: props.order,
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenAftersale() {
    useModal(
      AftersaleDetail,
      {
        title: '售后详情',
        id: props.item.ext.aftersale_id,
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenRefund() {
    useModal(
      OrderRefund,
      {
        title: '退款',
        class: 'refund-dialog',
        type: 'order.refund',
        data: {
          id: props.order.id,
          item_id: props.item.id,
          money: props.item.pay_fee,
          suggest_refund_fee: props.item.suggest_refund_fee,
        },
      },
      {
        confirm: () => {
          emit('updateList');
        },
      },
    );
  }

  function onOpenComment() {
    useModal(CommentIndex, {
      title: '查看评价',
      type: 'modal',
      data: {
        order_id: props.order.id,
        order_item_id: props.item.id,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .status {
    padding: 4px 12px;
    width: fit-content;
    line-height: 16px;
    font-size: 12px;
    font-weight: 400;
    border-radius: 16px;
    display: inline-block;

    &.status-primary {
      color: var(--el-color-primary);
      background: var(--sa-background-hex-active);
    }

    &.status-success {
      color: #52c41a;
      background: rgba(82, 196, 26, 0.16);
    }

    &.status-warning {
      color: #faad14;
      background: rgba(250, 173, 20, 0.16);
    }

    &.status-danger {
      color: #ff4d4f;
      background: rgba(255, 77, 79, 0.16);
    }

    &.status-info {
      color: #999999;
      background: rgba(153, 153, 153, 0.16);
    }
  }
</style>
